<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>课程信息</title>
	<meta name="Keywords" content="关键词，关键词，关键词，。。。">
	<meta name="Description" content="">
	<link rel="stylesheet" href="css/iconfont/iconfont.css">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/model.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/login.css">
	<link rel="stylesheet" href="css/course-info.css">		
  </head>
<body>
	<!-- header start -->
	<div id="header">
		<div class="topbar topbar-black-style min-w">
			<div class="container clearfix">
				<div class="logo">
					<a href="test.html?a=1&b=2">
						logo
						<img class="dis-n" src="" alt="" width="200px" height="60px">
					</a>
				</div>
				<div class="shortcut fl-l mar-t10">
					<ul class="clearfix">
						<li><a href="#">课程</a></li>
						<li><a href="#">直播</a></li>
						<li><a href="#">系统学习</a></li>
						<li><a href="#">猿问平台</a></li>
						<li><a  href="#">练心之路</a></li>
					</ul>
				</div>
				<div class="search">
					<form action="#">
						<input  type="text" id="search" placeholder="搜索">
						<button><i class="iconfont icon-search f-size20 c-eee"></i></button>
					</form>
				</div>
				<div  class="userarea">
					<ul id="userarea">
						<li>
							<a href="#" class="pos-r">
								<b id="shopcar-num"></b>
								<i class="iconfont icon-gouwuchekong c-777 f-size18"></i>
								购物车
							</a>
						</li>
						<li id="login"><a href="#">登录</a></li>
						<li id="register"><a href="#">注册</a></li>
						<li id="news">
							<a href='#'  class="pos-r">
								<b id="news-num"></b>
								<i class='iconfont icon-lingdang f-size20'></i>
							</a>
						</li>
						<li id="userhead">
							<a href="#">
								<img src="img/people.jpg" alt="" width="40" height="40">
							</a>	
							<ul class="sub-nav">
								<li>
									<a href="#">个人中心</a>
								</li>
								<li>
									<a href="#" onclick="logout();">退出</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- header end -->
	<div id="login-box">
		<div id="login-close"><i class="iconfont icon-close"></i></div>
		<h1>登录</h1>
		<span>@邮箱</span><b id="email-tip"></b>
		<input id="email" type="text" name="email">
		<span>@密码</span><b id="password-tip"></b>
		<input id="password" type="password" name="password">
		<em id="login-tip"></em>
		<button id="login-btn">登录</button>
		<div class="link">
			<a href="#">注册账号</a>
			<a href="#">忘记密码？</a>
		</div>
	</div>
	<!-- main start -->
	<div id="main">
		<!-- course infor start -->
		<div class="course-infor-wrap min-w">
			<div class="course-infor container bor-trans clearfix">
				<div id="teacher-field" class="teacher-infor fl-l mar-t30">
					<div class="head-img mar-a">
						<img src="img/people.jpg" alt="" width="160" height="160">
					</div>
					<div class="teacher-detail mar-t15 clearfix c-fff">
						<p class="teacher-name mar-r10 mar-b10 t-a-c f-size16">author</p>
						<div class="star-set clearfix mar-a">
							<span class="star star-full"></span>
							<span class="star star-full"></span>
							<span class="star star-full"></span>
							<span class="star star-full"></span>
							<span class="star star-full"></span>
							<b class="mark">5.0</b>
						</div>
					</div>
				</div>
				<div id="course-detail-wrapper" class="course-detail-wrap fl-l mar-l30 pad-l30 pad-r30 bor-trans">
						<div class="path mar-t20 c-ccc"></div>
						<h2 class="course-title mar-t10 f-size40 c-fff">HTML+CSS基础课程</h2>
						<div class="course-detail mar-t10 c-ccc">
							<ul class="clearfix">
								<li class="fl-l pad-r25">
									<b >学习人数</b><br>
									<span class="f-size16">123456</span>
									<i class="detail-seperator"></i>
								</li>
								<li class="fl-l pad-l25 pad-r25">
									<b>难度级别</b><br>
									<span class="f-size16">初级</span>
									<i class="detail-seperator"></i>
								</li>
								<li class="fl-l pad-l25 pad-r25">
									<b>课程时长</b><br>
									<span class="f-size16">9小时18分</span>
									<i class="detail-seperator"></i>
								</li>
								<li class="fl-l pad-l25">
									<b>综合评分</b><br>
									<span class="f-size16">9.0</span>
								</li>
							</ul>
						</div>
						<div class="join-wrapper mar-t30">
							<div>
								<span class="join">加入学习</span>
								<i class="seperator"></i>
							</div>
							<div title="收藏">
								<i class="collect iconfont icon-star1"></i>
							</div>
						</div>
					</div>
			</div>
		</div>
		<!-- course infor end -->
		<!-- course infor main start -->
		<div class="course-infor-main container bor-trans clearfix bgc-fff">
			<div class="section-left fl-l">
				<!-- course introduction start -->
				<p id="course-intro" class="mar-t30 pad-l20 pad-r20 c-333">简介 : 本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分讲解CSS样式代码添加，为后面的案例课程打下基础。</p>
				<!-- course introduction end -->
				<!-- course menu start -->
				<div id="course-menu" class="menu-tabs mar-t30 pad-b30 pad-l20 pad-r20 f-size16 f-wei-b bor-b">
					<ul class="clearfix">
						<li class="selected fl-l mar-r30 pad-r10">
							章节
						</li>
						<li class="fl-l mar-r30 pad-l10 pad-r10">
							评论
						</li>
						<li class="fl-l pad-l10 pad-r10">
							问答
						</li class="fl-l">
					</ul>
				</div>
				<!-- course menu end -->
				<!-- course chapters start -->
				<div id="course-chapters">
					<!-- <div class="chapter">
						<a href="">
							<span class="chapter-icon">=</span>
							<h3 class="title">第1章 HTML简介</h3>
							<div class="desc-box">
								<span class="desc-icon">!</span>
								<div class="chapter-desc">
									本章节主要讲解html和css样式的关系，以及html标签、html文件结构、head标签,最后讲解了在html中的注释代码的作用。
								</div>
							</div>
							<button>开始学习</button>
						</a>
						<ul class="video-link">
							<li>
								<a href="#">
									<i class="iconfont icon-arrowleft ">
										<i class="iconfont icon-arrow"></i>
									</i>
									<span>1-1 代码初体验，制作我的第一个网页</span>
									<button>开始学习</button>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="iconfont icon-arrowleft mar-l5 mar-r10">
										<i class="iconfont icon-arrow"></i>
									</i>
									<span>1-2 Html和CSS的关系</span>
									<button>开始学习</button>
								</a>
							</li>
						</ul>
					</div>	 -->
				</div>

				<!-- course chapters end -->
			</div>
		</div>
		<!-- course infor main end -->
			
		
	</div>
	<!-- main end -->
	<!-- footer start -->
	<div id="footer" class="min-w"></div>
	<!-- footer end -->
	<script src="js/util.js"></script>
	<script src="js/login.js"></script>
	<script src="js/form-util.js"></script>
	<script src="js/course-info.js"></script>
</body>
</html>
